<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <link href="../../resources/css/map.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../resources/lib/raphael/raphael-min.js"></script>
    <script type="text/javascript" src="../../resources/lib/raphael/raphael.json.js"></script>
    <script type="text/javascript" src="../../resources/lib/raphael/raphael.free_transform.js"></script>
    <script type="text/javascript" src="../../resources/lib/jquery/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        body {
            background: url('grid.gif') repeat #111;
            color: #fff;
            font-family: Georgia;
            font-size: 16;
            font-style: italic;
            font-weight: bold;
            margin: 0;
        }
        #map_canvas {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="jvectormap-container" style="width: 100%; height: 100%;
position: relative; overflow: hidden; background-color: transparent;">
    <div id="map_canvas">

    </div>
    <div class="map-zoomin">+</div>
    <div class="map-zoomout">−</div>
</div>
<script type="text/javascript">

    var canvasX = 0;
    var canvasY = 0;
    var canvasWidth = canvasCurrentWidth = 694;
    var canvasHeight = canvasCurrentHeight = 213;
    $(".map-zoomin").click(function(){
        canvasCurrentWidth /= 1.1;
        canvasCurrentHeight /= 1.1;
        setViewBox();
    });
    $(".map-zoomout").click(function(){
        canvasCurrentWidth *= 1.1;
        canvasCurrentHeight *= 1.1;
        setViewBox();
    });
    function setViewBox() {
        var offsetX = (canvasWidth - canvasCurrentWidth) / 2;
        var offsetY = (canvasHeight - canvasCurrentHeight) / 2;
        paper.setViewBox(offsetX, offsetY, canvasCurrentWidth, canvasCurrentHeight, true)
    }


    var paper = Raphael('map_canvas');

    // Create a set
    var exampleSet = paper.set();

    var rect = paper.rect(50, 50, 50, 50).attr({ fill: 'red' });
    rect.mousedown(function(e){
        if ( this.freeTransform == null ) {
            paper.freeTransform(this, {});
//        } else {
//            console.log(e);
//            paper.freeTransform(this).unplug();
        }
    });

    exampleSet.push(rect);

    // Store a unique identifier in each of the set's elements
    for ( var i in exampleSet ) {
        exampleSet[i].setName = 'exampleSet';
    }

    // Serialize the paper
    var json = paper.toJSON(function(el, data) {
        // Save the set identifier along with the other data
        data.setName = el.setName;

        data.ft = {};
        if ( el.freeTransform != null ) {// 保存形状编辑器状态
            data.ft.attrs = el.freeTransform.attrs;
            paper.freeTransform(el).unplug();
        }

        return data;
    });

    // Start over
//    paper.clear();

    exampleSet = null;

    // Restore the paper to the previous state using serialized data
/*    paper.fromJSON(json, function(el, data) {
        // Recreate the set using the identifier
        if ( !window[data.setName] ) window[data.setName] = paper.set();

        // Place each element back into the set
        window[data.setName].push(el);

        if ( data.ft && data.ft.attrs ) {
            paper.freeTransform(el);
            el.freeTransform.attrs = data.ft.attrs;
            el.freeTransform.apply();
        }

        return el;
    });*/

    // The set is restored
    console.log(json);
</script>
</body>
</html>